<template>
	<view class="imgSee">
		<view class="imgSee-plate-1">
			<image :src="head_bg" mode=""></image>
			<view class="content">
				<view class="item" style="padding: 0 30upx;">
					提交鉴定
				</view>
				<image src="../../../static/ic_identify_bg_2.png" mode="widthFix"></image>
				<view class="item" style="padding: 0 10upx;text-align: center;">
					鉴定师初审
				</view>
				<image src="../../../static/ic_identify_bg_2.png" mode="widthFix"></image>
				<view class="item" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<text>首席</text>
					<text>鉴定师</text>
					<text>复核</text>
				</view>
				<image src="../../../static/ic_identify_bg_2.png" mode="widthFix"></image>
				<view class="item"  style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<text>出具鉴</text>
					<text>定结果</text>
				</view>
			</view>
		</view>
		<view class="imgSee-plate-2">
			<view class="title">
				请选择品类
			</view>
			<view class="content">
				<view class="item" :class="activeIndex == index? 'active':''" v-for="(item,index) in goodsClass" :key="index" @click="onClassShow(item.id,index)">
					<image :src="item.category_pic" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="imgSee-plate-3">
			<view class="title">
				购买渠道
			</view>
			<view class="content">
				<u-radio-group v-model="value" @change="radioGroupChange" class="box">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in channelLIst"
						:key="index"
						:name="item.id"
						:disabled="item.disabled"
						active-color="#D1AA56"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="imgSee-plate-4">
			<view class="title">
				上传图片
			</view>
			<view class="content">
				<u-upload :action="action" :file-list="fileList" max-count="3" @on-uploaded="onUploaded"></u-upload>
			</view>
			<view class="btm-txt">
				注意：为保障鉴定的准确性，请您务必图片至少上传三张
				（建议尺寸：700*700）。
			</view>
		</view>
		<view class="imgSee-plate-5">
			<view class="title">
				物品描述
			</view>
			<view class="content">
				<u-input type="textarea" v-model="descTxt" height="200" placeholder="请描述一下您的物品吧,以便鉴定师给出更精准的评估(必填)"></u-input>
			</view>
			<button class="bg-btn" @click="onSubmit">立即提交</button>
		</view>
		
		<!-- 弹窗区域 -->
		<u-action-sheet :list="classList" v-model="listShow" @click="onChoose"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '6',
				// 演示地址，请勿直接使用
				action: this.$Url + '/index.php/app/utils/upload_pic_oss',
				fileList: [],
				qita:'其他',
				listShow:false,
				goodsClass:[],
				classList:[],
				goodsClassIndex:0,
				activeIndex:3,
				itemClass:'item',
				channelLIst:[],//渠道列表
				goodsId:'',// 商品主分类ID
				goodsClassId:'',//商品子分类ID
				buyChannel:'',//购买渠道～
				descTxt:'',//描述
				imgArr:[],//上传的图片列表
				head_bg:this.$Url + '/public/upload/au_pic/20201218193206.png'
			}
		},
		created() {
			this.getClassList()
			this.getChannel()
		},
		methods: {
			// 上传完毕
			onUploaded(e){
				let arr = []
				for (let i = 0; i < e.length; i++) {
					arr.push(e[i].response.data)
				}
				this.imgArr = arr
				console.log(this.imgArr)
			},
			// 提交鉴定
			onSubmit(){
				uni.request({
				    url:this.$Url +'/index.php/app/Authentication/picAuthen',
				    method:'POST',
				    data:{
				       category_id:this.goodsId,
					   goods_category_id:this.goodsClassId,
					   buy_channel:this.buyChannel,
					   authen_pic:this.imgArr,
					   description:this.descTxt 
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title:'提交成功，请注意查看鉴定结果',
								icon:'none',
								duration:1200
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'../appraisal'
								})
							},1200)
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求购买渠道列表
			getChannel(){
				uni.request({
				    url:this.$Url +'/index.php/app/GeneralList/index',
				    method:'POST',
				    data:{
				       type:2
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.channelLIst = res.data.data
							let dataArr = res.data.data
							let arr = []
							for (let i = 0; i < dataArr.length; i++) {
								arr.push({
									name:dataArr[i].channel_name,
									disabled:false,
									id:dataArr[i].buy_channel_id
								}) 
							}
							this.channelLIst = arr
							this.buyChannel = this.channelLIst[0].id
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 选择其他
			onRest(){
				uni.showToast({
					title:'已选择其他',
					icon:'none',
					duration:1200
				})
				this.activeIndex = 3
				this.itemClass = 'item active'
			},
			// 显示操作菜单
			onClassShow(id,index){
				this.listShow = true
				this.goodsClassIndex = index
				this.activeIndex = index
				this.goodsId = this.goodsClass[index].id
				this.itemClass = 'item'
				uni.request({
				    url:this.$Url +'/index.php/app/GeneralList/index',
				    method:'POST',
				    data:{
				       type:1,
					   id:id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							let arr = []
							let DataArr = res.data.data.childs_category
							for (let i = 0; i < DataArr.length; i++) {
								arr.push({
									text:DataArr[i].name,
									id:DataArr[i].id,
									type_id:DataArr[i].type_id
								}) 
							}
							this.classList = arr
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求分类列表数据
			getClassList(){
				uni.request({
				    url:this.$Url +'/index.php/app/GeneralList/index',
				    method:'POST',
				    data:{
				       type:1,
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.goodsClass = res.data.data.childs_category
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 选择操作菜单
			onChoose(index){
				this.goodsClass[this.goodsClassIndex].name = this.classList[index].text
				this.goodsClassId = this.classList[index].id
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.buyChannel = e
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.imgSee{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.imgSee-plate-1{
		width: 750upx;
		height: 345upx;
		position: relative;
		>image{
			width: 750upx;
			height: 345upx;
		}
		.content{
			width: 710upx;
			height: 166upx;
			border-radius: 20upx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			top: 260upx;
			left: 20upx;
			padding: 0 30upx;
			.item{
				width: 122upx;
				height: 122upx;
				border: 1upx solid $zhuti-color;
				border-radius: 50%;
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 24upx;
				color: #333;
			}
			image{
				width: 20upx;
			}
		}
	}
	.imgSee-plate-2{
		margin-bottom: 48upx;
		margin-top: 120upx;
		.title{
			font-size: 40upx;
			color: #333;
			font-weight: 600;
			margin-bottom: 45upx;
			text-align: center;
		}
		.content{
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.item{
				position: relative;
				width: 206upx;
				height: 196upx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					position: absolute;
					top: 0;
					left: 0;
					width: 206upx;
					height: 196upx;
				}
				text{
					color: #fff;
					font-size: 32upx;
					z-index: 100;
				}
			}
			.active{
				border: 8upx solid $zhuti-color;
				overflow: hidden;
				text{
					color: $zhuti-color;
					font-weight: 600;
				}
			}

		}
	}
	.imgSee-plate-3{
		margin-bottom: 48upx;
		padding: 0 30upx;
		.title{
			font-size: 40upx;
			color: #333;
			font-weight: 600;
			margin-bottom: 45upx;
			text-align: center;
		}
		.content{
			.box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}
	}
	.imgSee-plate-4{
		margin-bottom: 48upx;
		padding: 0 30upx;
		.title{
			font-size: 40upx;
			color: #333;
			font-weight: 600;
			margin-bottom: 45upx;
			text-align: center;
		}
		.content{
			padding: 0 30upx;
		}
		.btm-txt{
			font-size: 26upx;
			color: #a8a8a8;
			padding-left: 30upx;
			margin-top: 30upx;
		}
	}
	.imgSee-plate-5{
		padding: 0 30upx;
		padding-bottom: 100upx;
		.title{
			font-size: 40upx;
			color: #333;
			font-weight: 600;
			margin-bottom: 35upx;
			text-align: center;
		}
		.content{
			width: 705upx;
			height: 245upx;
			border: 1upx solid #a2a2a2;
			padding: 20upx;
		}
		button{
			width: 545upx;
			height: 93upx;
			margin-top: 50upx;
			font-size: 40upx;
		}
	}
}
</style>
